<template>
  <div>
    <h2>Home:{{ $store.state.counter }}</h2>
    <h1>---setup->mapState---</h1>
    <h3>Home:{{ sCounter }}</h3>
    <h3>Home:{{ name }}</h3>
    <h3>Home:{{ age }}</h3>
    <h3>Home:{{ height }}</h3>
  </div>
</template>
<script>
//辅助函数
import { useStore, mapState } from "vuex";
import { computed } from "vue";
export default {
  setup() {
    const store = useStore();
    const sCounter = computed(() => store.state.counter);

    //这里其实都是一个一个函数 {name：function, age:function, height:function}
    const storeStateFns = mapState(["name", "age", "height"]);
    const storeState = {}; //{name: ref, age:ref, height:ref}
    Object.keys(storeStateFns).forEach((fnKey) => {
      const fn = storeStateFns[fnKey].bind({ $store: store }); //绑定this 是一个对象($store) 值是从上面useStore的store
      storeState[fnKey] = computed(fn);
    });
    return {
      sCounter,
      //   ...storeStateFns,
      ...storeState,
    };
  },
};
</script>
<style>
</style>
